<template>
  <page-header-wrapper>
    <a-card>
      <a-descriptions title="" bordered :column="1">
        <a-descriptions-item label="姓名"> {{ info?.userName }} </a-descriptions-item>
        <a-descriptions-item label="联系电话"> {{ info?.phone }} </a-descriptions-item>
        <a-descriptions-item label="身份证号"> {{ info?.vipNumber }} </a-descriptions-item>
        <a-descriptions-item label="归属店"> {{ info?.storeName }} </a-descriptions-item>
        <a-descriptions-item label="职务"> {{ info?.jobName }} </a-descriptions-item>
        <a-descriptions-item label="入职日期"> {{ info?.inDate }} </a-descriptions-item>
        <a-descriptions-item label="操作">
          <a @click="handleEdit">修改密码</a>
        </a-descriptions-item>
      </a-descriptions>
    </a-card>
    <create-form
      ref="createModal"
      :visible="visible"
      :loading="confirmLoading"
      :model="mdl"
      @cancel="handleCancel"
      @ok="handleOk"
    />
  </page-header-wrapper>
</template>

<script>
import { PageHeaderWrapper } from '@ant-design-vue/pro-layout'
import CreateForm from './edit'
import { myInfoUsingGET, updatePasswordUsingPOST } from '@/api/api/wode.ts'
export default {
  name: 'HomeIndex',
  components: {
    PageHeaderWrapper,
    CreateForm,
  },
  data() {
    return {
      visible: false,
      confirmLoading: false,
      info: {},
      mdl: null,
    }
  },
  computed: {},
  created() {
    this.fetchInfo()
  },
  mounted() {},
  methods: {
    fetchInfo() {
      myInfoUsingGET()
        .then((res) => {
          this.info = res.data
        })
        .catch(() => {
          this.info = {}
        })
    },
    handleEdit() {
      this.visible = true
    },
    handleOk() {
      const form = this.$refs.createModal.form
      this.confirmLoading = true
      form.validateFields((errors, values) => {
        if (!errors) {
          updatePasswordUsingPOST({ ...values })
            .then((res) => {
              console.log(res)
              this.visible = false
              this.confirmLoading = false
              // 重置表单数据
              form.resetFields()
              // 刷新表格
              this.$message.info('修改成功')
              this.fetchInfo()
            })
            .catch((error) => {
              this.confirmLoading = false
              this.$message.error(((error.response || {}).data || {}).msg || '请求出现错误')
            })
        } else {
          this.confirmLoading = false
        }
      })
    },
    handleCancel() {
      this.visible = false
      const form = this.$refs.createModal.form
      form.resetFields() // 清理表单数据（可不做）
    },
  },
}
</script>

<style lang="less" scoped>
@import './index.less';
</style>
